<template>
  <div>
    <!-- 子传父:
      1. 在父组件中给子组件绑定自定义事件
          @自定义事件名="事件处理函数"
      2. 子组件在特定的时机里触发这个事件
     -->
    <MyProduct 
      v-for="item in list" 
      :key="item.id"
      :title="item.proname"
      :money="item.proprice"
      :id="item.id"
      @kan="kanFn" />
  </div>
</template>

<script>
// 引入
import MyProduct from './components/MyProduct'
// 注册
// 使用

// 父向子传值
// 1. 在父组件中给子组件标签添加自定义属性
// 2. 在子组件中使用 props 来接收
export default {
  components: {
    MyProduct
  },
  data() {
    return {
      msg: '这个口水鸡爽口鲜嫩多汁美味!',
      list: [
        { id: 1, proname: '超级无敌椰子鸡儿', proprice: 69 },
        { id: 2, proname: '超级无敌棒棒鸡儿', proprice: 59 },
        { id: 3, proname: '超级无敌钵钵鸡儿', proprice: 49 }
      ]
    };
  },
  methods: {
    kanFn(id) {
      // console.log('这是父组件的砍价事件', id)
      const product = this.list.find(item => item.id === id)

      product.proprice -= 2
    }
  }
}
</script>

<style scoped>

</style>